<template>
  <div id="app">
    <div id="header">
      <mt-header :title="title" fixed class="mt-header">
        <div @click="back" slot="left">
          <mt-button icon="back">返回</mt-button>
        </div>
        <mt-button icon="more" slot="right" @click="sheetVisible=!sheetVisible"></mt-button>
      </mt-header>
    </div>
    <div style="height: 40px;color: white;width: 100%">11</div>
    <div id="body">
      <router-view/>
    </div>
    <div id="footer"></div>

    <mt-actionsheet
            :actions="actions"
            v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  import apiUrl from '@/api/apiUrl'
  import {Toast} from 'mint-ui'
  import {logout} from "./utils/tool"

  export default {
  name: 'index',
  data () {
    return {
        title: '赛车',
        sheetVisible: false,
        actions: []
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.setPageTitle()
    })
  },
  watch: {
    $route () {
        this.setPageTitle()
        this.nav()
    }
  },
  methods: {
      setPageTitle () {
        if (this.$route.meta.title) {
          this.title = this.$route.meta.title
        }
      },
      back () {
        this.$router.go(-1)
      },
      nav () {
          let actions = [
              {
                  name: '用户中心',
                  method: this.gotoUsers
              }
          ]
          // 搜索
          // if (this.$route.meta.search) {
          //     actions.push({
          //         name: '搜索',
          //         method: this.gotoSearch
          //     })
          // }
          // 进入房间
          actions.push({
              name: '进入房间',
              method: this.gotoRoom
          })

          // 退出登录
          actions.push({
              name: '退出登录',
              method: this.logout
          })
          this.$set(this, 'actions', actions)
      },
      gotoUsers()
      {
          // let userType = this.$route.meta.userType
          let userType = sessionStorage.getItem('user_type')
          if (userType === 'user') {
              this.$router.replace({name: 'user-center'})
          } else if (userType === 'room') {
              this.$router.replace({name: 'room-center'})
          } else {
              this.$router.replace({name: 'admin-center'})
          }
      },
      gotoSearch () {
          console.log(this.$route.meta.search)
      },
      gotoRoom () {
          this.$router.push({name: 'factory-login'})
      },
      logout()
      {
          let params = {
              params: {
                  user_type: sessionStorage.getItem('user_type')
              }
          }
          this.$http.get(apiUrl.api.logout, params).then(res => {
              if (res.data.code !== 0) {
                 Toast('退出失败')
              } else {
              Toast('退出登陆')
                  logout()
                this.$router.replace({name: 'login'})
              }
          })
      }
  }
}
</script>

<style lang="less">
  @import "assets/css/bases";
  .app-popup {
    width: 100%;
    .more {
      width: 100%;
      .body {

      }
      .cannel {
        border-top: @gray solid 5px;
        height: 45px;
        text-align: center;
        line-height: 45px;
      }
    }
  }
</style>
